<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title></title>
	<style type="text/css">
		/* v-enter 这个是一个时间点 表示动画进入之前 元素的起始状态,此时没有进入 */
		/* v-leave-to 这个是一个时间点  表示动画离开之后 元素的终止状态,此时动画己结束 */
		.v-enter,.v-leave-to{
			opacity: 0;
			transform: translateX(50px);
		}
		/* v-enter-active 入场动画的时间段 */
		/* v-leave-active 离场动画的时间段 */
		.v-enter-active,.v-leave-active{
			transition: all 0.8s ease;
		}
	</style>
</head>
<body>
	<div id="app">
		<button @click="flag=!flag">点击</button>
		<transition>
			<div v-show="flag">这个是一个div</div>
		</transition>
		<transition>
			<div v-show="!flag">这个是二个div</div>
		</transition>
	</div>
	
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				flag:true
			}
		})
	</script>
</body>
</html>